<template>
	<view class="box-item flex align-center">
		<radio v-if="showCheckBox" color="#6E24FF" :checked="value.checked" @click="$emit('boxItemSelect')" />
		<image class="img" :src="$util.img(value.goods_img+'?x-oss-process=image/resize,w_180,m_lfit')" mode="" @click="$emit('preDetail')"></image>
		<view class="box-info" @click="$emit('preDetail')">
			<view class="name ellipsis-line2">{{value.goods_name}}</view>
			<!-- 	<view class="desc ellipsis"></view> -->
			<text class="tag" :style="{background:c_color}">{{value.box_level}}</text>
			<view class="flex align-end">
				<text class="label">花费</text>
				<text class="unit-icon"></text>
				<text class="price">{{value.box_amount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showCheckBox: {
				type: Boolean,
				default: true
			},
			value: {
				type: Object,
				required: true
			}
		},
		computed: {
			c_color() {
				
				switch (this.value.box_level) {
					case "至尊款":
						return "linear-gradient(67deg, #FF5DA2, #FB4565)"
					case "稀有款":
						return "linear-gradient(270deg, #FFC967, #FFA02D)"
					case "隐藏款":
						return "linear-gradient(270deg, #9551FF, #BA8EFF)"
					case "普通款":
						return "linear-gradient(270deg, #5383FF, #72BCFF)"
					default :
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-item /deep/ uni-radio .uni-radio-input-checked {
		background-color: #6E24FF !important;
		border-color: #6E24FF !important;
	}

	.box-item {
		padding: 19rpx 28rpx 21rpx;
		background: #FFFFFF;
		border-radius: 21rpx;

		.img {
			flex-shrink: 0;
			margin-right: 27rpx;
			margin-left: 14rpx;
			width: 181rpx;
			height: 181rpx;
			// background-color: #eee;
			border-radius: 10rpx;
		}

		.box-info {
			padding-top: 6rpx;
			flex: 1;

			.name {
				font-size: 28rpx;
				font-weight: 500;
				color: #111111;
				line-height: 32rpx;
				height: 64rpx;
				width: 380rpx;
			}

			.desc {
				margin-top: 16rpx;
				font-size: 19rpx;
				color: #999999;
				line-height: 24rpx;
				height: 24rpx;
				width: 380rpx;
			}

			.tag {
				display: inline-block;
				margin-top: 17rpx;
				margin-bottom: 15rpx;
				padding: 6rpx;
				background: linear-gradient(270deg, #FFC967, #FFA02D);
				border-radius: 7rpx;
				font-size: 19rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 28rpx;
				text-align: center;
			}

			.label {
				margin-right: 5rpx;
				font-size: 22rpx;
				line-height: 26rpx;
				color: #111111;
			}

			.unit-icon {
				width: 46rpx;
				height: 44rpx;
				background: url("~@/static/image/coin-icon.png");
				background-size: 100% 100%;
			}

			.price {
				font-size: 33rpx;
				font-weight: bold;
				color: #FF0036;
				line-height: 33rpx;
			}
		}
	}
</style>
